<template>
	<view class="" style="padding: 30rpx;">
		<uni-grid :column="3" :highlight="true" :showBorder="false" :square="false">
			<uni-grid-item v-for="(item, index) in list" :key="item.name">
				<view class="grid-item-box" @click="toDetail(item)">
					<image :src="item.cover" mode="aspectFill" style="width: 200rpx; height: 200rpx;"></image>
					<view class="info">
						<text class="text">{{ item.name }}</text>
					</view>
				</view>
			</uni-grid-item>
		</uni-grid>
	</view>
</template>

<script>
	import http from "@/utils/http.js"
	export default{
		data(){
			return {
				list: []
			}
		},
		onLoad() {
			http.get('/albums').then(r => {
				this.list = r.data
			})
		},
		methods: {
			toDetail(album){
				uni.navigateTo({
					url: "/pages/music/album?name=" + album.name + "&cover=" + album.cover
				})
			}
		}
	}
</script>

<style>
	.grid-item-box{
		padding: 10rpx;
		border-bottom: 1rpx solid #ccc;
		margin-bottom: 20rpx;
	}
	.info{
		white-space: nowrap; /* 保证文本在一行内显示 */
		overflow: hidden; /* 隐藏溢出的内容 */
		text-overflow: ellipsis; /* 使用省略号表示文本溢出 */
	}
	.text{
		font-size: 24rpx;
		line-height: 2;
	}
	.page{
		font-size: 20rpx;
		color: #999;
	}
</style>